<template>
  <div class="archivesOuter" :style="{ background: `url(${bgImg}) no-repeat`, backgroundSize: 'cover' }">
    <HeaderPage :headerNavindex="3" />

    <div class="archive_content">

      <ul class="timeLine timeLiner_center" v-if="articleData.length !== 0">
        <!-- 起始时间 -->
        <li class="timeLine_item">
          <div class="timeLine_item_info"></div>
          <div class="timeLine_item_marker"></div>
          <div class="timeLine_item_content">
            <h2 class="timeLine_item_content_title">2023</h2>
          </div>
        </li>

        <li class="timeLine_item" v-for="item in articleData" :key="item._id">
          <div class="timeLine_item_info">
            <span>{{timeChange(item.createTime)}}</span>
          </div>
          <div class="timeLine_item_marker"></div>
          <div class="timeLine_item_content">
            <h3 class="timeLine_item_content_title">{{item.title}}</h3>
            <p>{{item.introduction}}</p>
          </div>
        </li>

      </ul>
      <div class="article_null" v-else>
        <span>数据为空</span>
      </div>

      <FooterPageVue />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import HeaderPage from '../../components/HeaderPage.vue';
import FooterPageVue from '../../components/FooterPage.vue';

import { getBgImgApi } from "../../service/apiModule/foregroundApi";
import { getArticleApi } from '../../service/apiModule/articleApi'
import { timeChange } from '../../hooks/index'

onMounted(() => {
  getBgImg()
  getArticle()
})

const bgImg = ref('')

const getBgImg = async () => {
  const { data: res } = await getBgImgApi();
  if (res.status.code === 200) {
    res.data.forEach((item: any) => {
      if (item.bgTitle === "归档背景") {
        bgImg.value = item.imgSrc;
      }
    });
  }
};

const articleData = ref([{
  articleStatus: "",
  category: "",
  commentLikeFavorites: "", // 评论点赞收藏
  createTime: 0,
  introduction: "",
  tag: "",
  title: "",
  updateTime: 0,
  _id: ""
}])

// 获取文章
const getArticle = async () => {
  const { data: res } = await getArticleApi({ id: '' })
  if (res.status.code !== 200) {
    articleData.value = []
  } else {
    res.data.list.forEach((item: any) => {
      if (item.articleStatus === '已发布') {
        articleData.value.push(item)
      }
    })
  }
}

</script>

<style lang="scss" scoped>
.archivesOuter {
  width: 100%;
  height: 100vh;
  padding-top: 60px;
  background-color: orange;
}

.archive_content {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  overflow: auto;
  background-color: rgba(255, 255, 255, .4);
}

.timeLine {
  width: 100%;
  line-height: 1.4rem;
  margin: 0;
  padding: 0;

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: inherit;
  }

  .timeLine_item {
    padding-left: 40px;
    position: relative;
    cursor: pointer;

    &:last-child &::after {
      content: none;
    }

    &:last-child {
      padding-bottom: 0;
    }



    .timeLine_item_info {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 3px;
      margin: 0 0 .5em 0;
      text-transform: uppercase;
      white-space: normal;
    }

    .timeLine_item_marker {
      width: 15px;
      position: absolute;
      top: 0;
      bottom: 0;

      &::before {
        content: '';
        display: block;
        height: 15px;
        width: 15px;
        background-color: #00e676;
        border: 3px solid transparent;
        border-radius: 100%;
        position: absolute;
        top: 4px;
        left: -2px;
        transition: background .3s ease-in-out, border .3s ease-in-out;
      }

      &::after {
        content: '';
        display: block;
        width: 3px;
        background-color: #ccd5db;
        position: absolute;
        top: 24px;
        bottom: 0;
        left: 6px;
      }
    }

    .timeLine_item_content {
      padding-bottom: 40px;

      &>p:last-child {
        margin-bottom: 0;
      }
    }

  }

  .timeLine_item:not(.period):hover .timeLine_item_marker::before {
    background: transparent;
    border: 3px solid #00e676;
  }

}

.timeLine_item:first-child {
  padding: 0;

  .timeLine_item_info {
    display: none;
  }

  .timeLine_item_marker {
    &::before {
      content: '';
      background: transparent;
      width: 20px;
      height: auto;
      border: none;
      border-radius: 0;
      position: absolute;
      top: 0;
      bottom: 30px;
      border-top: 3px solid #ccd5db;
      border-bottom: 3px solid #ccd5db;
    }

    &::after {
      content: '';
      height: 32px;
      top: auto;
    }
  }

  .timeLine_item_content {
    padding: 40px 0 70px;

    .timeLine_item_content_title {
      margin: 0;
    }
  }
}

.timeLine_item:first-child>.timeLine_item_content {
  float: right;
  text-align: center;
  margin-right: 60px;
  padding: 30px;
}

.timeLine_item:last-child>.timeLine_item_marker::after {
  display: none;
}

.timeLine_split {
  @media (min-width: 768px) {
    .timeLine {
      display: table;
    }

    .timeLine_item {
      display: table-row;
      padding: 0;
    }

    .timeLine_item_info,
    .timeLine_item_marker,
    .timeLine_item_content,
    .period .timeLine_item_info {
      display: table-cell;
      vertical-align: top;
    }

    .timeLine_item_marker {
      position: relative;
    }

    .timeLine_item_content {
      padding-left: 30px;
    }

    .timeLine_item_info {
      padding-right: 30px;
    }

    .period .timeLine_item_info {
      position: relative;
      left: -45px;
    }
  }
}

.timeLiner_center {
  @extend .timeLine_split;

  @media (min-width: 992px) {

    .timeLine_item,
    .timeLine_item_info,
    .timeLine_item_marker,
    .timeLine_item_content {
      display: block;
      padding: 0;
    }

    .timeLine_item {
      padding-bottom: 40px;
      overflow: hidden;
    }

    .timeLine_item_marker {
      position: absolute;
      left: 50%;
      margin-left: -7.5px;
    }

    .timeLine_item_info,
    .timeLine_item_content {
      width: 50%;
    }

    >.timeLine_item:nth-child(odd) .timeLine_item_info {
      float: left;
      text-align: right;
      padding-right: 30px;
    }

    >.timeLine_item:nth-child(odd) .timeLine_item_content {
      float: right;
      text-align: left;
      padding-left: 30px;
    }

    >.timeLine_item:nth-child(even) .timeLine_item_info {
      float: right;
      text-align: left;
      padding-left: 30px;
    }

    >.timeLine_item:nth-child(even) .timeLine_item_content {
      float: left;
      text-align: right;
      padding-right: 30px;
    }

    >.timeLine_item.period {
      padding: 50px 0 90px;
    }

    >.timeLine_item.period .timeLine_item_content {
      padding: 0;
      width: 100%;
      text-align: center;
    }

    .period .timeLine_item_marker::after {
      height: 30px;
      bottom: 0;
      top: auto;
    }

    .period .timeLine_item_content_title {
      left: auto;
    }
  }
}

.article_null {
  width: 100%;
  font-size: 40px;
  color: #fff;
  text-align: center;
  padding: 50px 0;
}
</style>